<!--  -->
<template>
  <div class="detail-nav-bar">
     <nav-bar>
          <div class="back" slot="left" @click="back">
              <img src="~assets/img/common/back.svg" alt="">
          </div>
          <div class="title" slot="center">
              <div v-for="(item, index) in titles" :key="index" :class="{active:currentIndex == index}" @click="titleClick(index)">{{item}}</div>
          </div>
      </nav-bar>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue';
export default {
  data () {
    return {
        titles:['商品','参数','评论','推荐'],
        currentIndex: 0
    };
  },

  components: {    
    NavBar,
  },

  computed: {},

  mounted() {},

  methods: {
      titleClick(index){
          this.currentIndex = index;
          this.$emit("detailNavItemClick",index)
      },
      back(){
          this.$router.back()
      }
  }
}

</script>
<style lang='scss' scoped>
.back{
    line-height:40px;
    img{
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
    }
}
.title{
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}
.active{
    color: #FF8198;
}
</style>